<template>
  <!-- 叫号队列 -->
  <section>
    <div>
      <el-link :underline="false" title="全屏" @click="isPlus=true">
        <i class="el-icon-full-screen vertical-middle" style="font-size:18px;"></i>
        <span class="vertical-middle">全屏</span>
      </el-link>
    </div>

    <div v-if="isPlus" :class="[isPlus?'puls-screen':'']">
      <div class="full-screen-content">
        <div class="top-head">
          <div>
            <img src="/img/logo.png" class="head-img vertical-middle" style="width:40px;height:40px;display: inline-block;" />
            &nbsp;
            <span class="vertical-middle">重庆善功科技</span>
          </div>
          <div>
            <div class="middle-title">排队叫号</div>
          </div>
          <div>
            <div>{{curDate|toDate}}</div>
            <div>{{curDate|toWeek}}&nbsp;&nbsp;{{curDate.getTime()|hourDate}}</div>
          </div>
        </div>
        <table class="table-full-screen" border="0" width="100%">
          <thead>
            <tr>
              <th>排号</th>
              <th>姓名</th>
              <th>科室</th>
              <th>诊室</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in tableList" :key="index" :class="[item.registerStatus==5?'primary-color':'']">
              <td>{{item.sourceCode}}</td>
              <td>{{item.patientInfo.name}}</td>
              <td>{{item.hpDepartment.deptName}}</td>
              <td>{{item.hpDiagnosisRoom.roomName}}</td>
              <td>{{item.registerStatus==5?"就诊中":"候诊中"}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="footer-box">请其他患者在候诊大厅等候</div>
    </div>
    <table v-else class="table-box" style="margin-top:20px;">
      <thead>
        <tr>
          <th>排号</th>
          <th>姓名</th>
          <th>科室</th>
          <th>诊室</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in tableList" :key="index" :class="[item.registerStatus==5?'primary-color':'']">
          <td>{{item.sourceCode}}</td>
          <td>{{item.patientInfo.name}}</td>
          <td>{{item.hpDepartment.deptName}}</td>
          <td>{{item.hpDiagnosisRoom.roomName}}</td>
          <td>{{item.registerStatus==5?"就诊中":"候诊中"}}</td>
        </tr>
      </tbody>
    </table>
    <audio ref="audio-el" autoplay></audio>
  </section>
</template>
<script>
export default {
  filters: {
    toDate(d) {
      return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`;
    }
  },
  data() {
    return {
      tableList: [],
      pager: { pageSize: 15, pageNum: 1, total: 0 },
      timer: null,
      queueArr: [],
      curDate: new Date(),
      isPlus: false, //是否全屏
      isPlay: false, //是否在播放
      playCount: 2, //播放几次
      curPlayCount: 0 //当前播放次数
    };
  },
  created() {
    let th = this;
  },
  mounted() {
    let th = this;
    // th.getData();
    th.timer = setInterval(function() {
      th.getData();
    }, 3000);
    th.timerDate = setInterval(() => {
      th.curDate = new Date();
    }, 1000);
    let audio = th.$refs["audio-el"];
    audio.loop = false;
    audio.addEventListener(
      "ended",
      function() {
        th.curPlayCount++;
        if (th.curPlayCount == th.playCount) {
          th.curPlayCount = 0;
          th.onPlay();
        } else {
          setTimeout(() => {
            audio.play();
          }, 1000);
        }
      },
      false
    );
    audio.addEventListener("canplay", function() {});
    document.addEventListener("keyup", th.onKeyUp);
  },
  methods: {
    onGuoHao(obj) {
      let th = this;
      let j = {
        id: obj.id,
        callStaus: 0
      };
      th.queueArr.splice(0, 1);
      th.$api.callOrdercallOrder(j).then(res => {
        if (res.executed) {
        }
      });
    },
    onKeyUp(e) {
      let th = this;
      th.isPlus = false;
    },
    getData() {
      let th = this;
      let j = {
        dateDay: th.$utils.FormatTime("yyyy-MM-dd", new Date().getTime()),
        doctorId: "",
        status: "1,5"
      };
      Object.assign(j, th.pager);
      th.$api.getDoctorRegisterList(j).then(res => {
        if (res.executed) {
          th.tableList = res.dataBody.list;
          th.pager.total = res.dataBody.total;
          th.compareData();
          th.addCallQueue();
          //正在播放就不调用接口
          if (!th.isPlay) th.onPlay();
        }
      });
    },
    //清除播放队列
    compareData() {
      let th = this;
      for (let i = th.queueArr.length - 1; i >= 0; i--) {
        if (i != 0) {
          th.queueArr.splice(i, 1);
        }
      }
    },
    onPlay() {
      let th = this;
      if (th.queueArr.length == 0) {
        th.isPlay = false;
        return;
      }
      th.isPlay = true;
      let data = th.queueArr[0];
      let str = `请,${data.sourceCode},${data.patientInfo.name}到${data.hpDepartment.deptName},${data.hpDiagnosisRoom.roomName}就诊`;
      let audio = th.$refs["audio-el"];
      // let strs = "http://39.106.59.18:8060/xfApi/xfApiCreateMusicByText?auf=audio/L16;rate=16000&volume=100&speed=40&aue=lame&voice_name=aisxping&text=" +str;
      // let strs =
      //   "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=" + str;
      let strs = `http://39.106.59.18:8060/aliApi/aliApiCreateMusicByText?voice=siyue&speechRate=-400&volume=100&text=${str}`;
      audio.src = strs;
      th.onGuoHao(data);
    },
    addCallQueue() {
      let th = this;
      for (let i = 0; i < th.tableList.length; i++) {
        let d = th.tableList[i];
        if (d.callStatus == 0) continue;
        let data = th.queueArr.find(qd => {
          return qd.id == d.id;
        });
        //加入队列
        if (data) {
        } else {
          th.queueArr.push(d);
        }
      }
    }
  },
  beforeDestroy() {
    let th = this;
    document.removeEventListener("keyup", th.onKeyUp);
    clearInterval(th.timer);
    clearInterval(th.timerDate);
  }
};
</script>
<style lang="scss" scoped>
.puls-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: white;
  top: 0;
  left: 0;
  font-size: 25px;
  display: flex;
  flex-direction: column;
  .full-screen-content {
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    .top-head {
      background: linear-gradient(#2f93b4, #1f8c91); /* 标准的语法 */
      color: white;
      display: flex;
      > div:nth-child(1) {
        flex: 1;
        padding: 20px;
      }
      > div:nth-child(2) {
        flex: 1;
        text-align: center;
      }
      > div:nth-child(3) {
        flex: 1;
        padding: 20px;
        text-align: right;
        font-size: 12px;
      }
      .middle-title {
        padding: 10px 0;
        margin: 0 auto;
        width: 70%;
        background: linear-gradient(#1ab296, #1aa4b0); /* 标准的语法 */
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        font-size: 30px;
        text-shadow: 2px 2px 0 #2e93b3;
        box-shadow: 0px 5px 15px -5 #2e93b3;
      }
    }
    .table-full-screen {
      border-spacing: 0;
      border-collapse: collapse;
      text-align: center;
      > thead {
        background-color: #218d95;
        color: #57bec5;
        > tr {
          height: 50px;
          font-size: 18px;
        }
      }
      > tbody {
        > tr {
          height: 60px;
          font-size: 25px;
        }
      }
    }
  }
  .footer-box {
    flex-shrink: 0;
    height: 60px;
    background-color: #2e93b3;
    text-align: center;
    line-height: 60px;
    color: white;
  }
}
</style>